<template>
  <div
    :class="['choose-wrap', 'disabled' ? 'disabled' : '']"
    @click="showWarpper"
    v-document-click="documentClick"
  >
    <div class="choose">
      <span>{{ value }}</span>
      <i class="el-icon-caret-bottom"></i>
      <div :class="{ 'mt-content': true, active: showWarpperActive }">
        <p>{{ title }}</p>
        <div :class="['wrapper', mclass]">
          <div class="col" v-for="(listData, index) in renderList" :key="index">
            <span
              class="mt-item"
              :class="{ active: item.name === value }"
              v-for="item in listData"
              :key="item.name"
              @click="changeValue(item)"
              >{{ item.name }}</span
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  props: ["list", "title", "value", "showWarpperActive", "disabled", "mclass"],
  computed: {
    renderList() {
      let col = Math.ceil(this.list.length / 12);
      let resultList = [];
      for (let i = 0; i < col; i++) {
        let data = this.list.slice(i * 12, i * 12 + 12);
        resultList.push(data);
      }
      return resultList;
    },
  },
  methods: {
    showWarpper(e) {
      e.stopPropagation();
      this.$emit("change_active", true);
      if (!this.disabled) {
        this.$emit("change_active", true);
      }
    },
    documentClick() {
      this.$emit("change_active", false);
    },
    changeValue(item) {
      this.$emit("change", item);
    },
  },
};
</script>

<style></style>
